避免浏览器默认行为：学习使用e.preventDefault()方法的正确姿势！

当你点击一个链接或表单提交按钮，浏览器会自动执行一些默认的行为，例如跳转到链接所指示的页面或者提交表单并刷新页面。然而，在某些情况下，我们希望阻止浏览器默认的行为，而是自己去实现某些特定的功能。这时候，我们就需要使用事件对象中的 preventDefault() 方法。

什么是 preventDefault() 方法？

preventDefault() 方法是在事件对象中预先定义好的方法，用于阻止浏览器对某些事件的默认行为。在 JavaScript 中，我们可以使用事件监听机制来监听一个事件并在它触发时执行一些代码。事件监听机制中传递事件对象 event，其中包含了我们想要阻止的默认行为。

preventDefault() 方法的定义如下：

```

event.preventDefault()

```

使用这个方法后，浏览器不会再执行默认的行为，我们可以通过 JavaScript 来实现我们想要的功能。

preventDefault() 方法有哪些场景使用？

preventDefault() 方法可以应用于在表单提交时停止表单提交，禁止点击链接进行跳转等多种场景。以下是一些常见的场景：

1. 阻止表单提交并刷新页面

假如我们正在使用表单提交数据，但是在提交完成之后不希望页面发生刷新。我们可以在提交按钮的事件监听函数当中使用 preventDefault() 方法来禁止默认的表单提交行为。例如：

```

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {

e.preventDefault(); // 阻止表单默认行为

// 接下来你就可以使用 JavaScript 来处理表单数据了

});

```

这样，在表单提交时就不会发生默认的刷新行为了。

2. 模拟链接点击

有时候，我们需要在不跳转页面的情况下模拟链接的点击行为，例如当点击某个按钮时弹出一个窗口。这时我们就可以在链接的点击事件监听函数内使用 preventDefault() 方法来阻止默认的跳转行为，并在函数内部执行我们所需的代码。例如：

```

const link = document.querySelector('a');

link.addEventListener('click', (e) => {

e.preventDefault(); // 阻止链接默认跳转行为

// 接下来你就可以执行自定义的代码，例如弹窗等操作

});

```

这样，当我们点击这个链接时，就不会跳转到链接对应的页面，而是执行我们所需要的操作。

3. 阻止事件冒泡

有时候，我们会在一个元素上绑定多个事件，并且这些事件嵌套在一起，例如在一个 div 元素内既有 click 事件又有 hover 事件。如果我们希望在 click 事件里阻止 hover 事件的默认行为，我们可以在 click 事件的监听函数中使用 preventDefault() 方法来阻止事件冒泡。例如：

```

const div = document.querySelector('div');

div.addEventListener('click', (e) => {

e.preventDefault(); // 阻止事件冒泡

// 接下来你就可以使用自定义的代码，不会受到 hover 事件的影响

});

div.addEventListener('hover', (e) => {

// 这个 hover 事件不会触发，因为 click 事件阻止了事件冒泡

});

```

这样，当我们在 div 元素内点击时，就不会触发 hover 事件，从而保证了代码的独立性。

注意事项

虽然 preventDefault() 方法可以防止浏览器默认事件的执行，但是一定要慎重使用，以免对用户造成不必要的困扰。除非我们真的需要阻止默认事件并用自定义代码来实现特定的行为，否则应该尽量避免使用 preventDefault() 方法。

此外，preventDefault() 方法只能阻止默认事件的执行，但是并不能完全阻止事件的传递。如果有其他元素也绑定了同样的事件，它们会触发在该元素上阻止的事件。如果希望完全阻止事件的传递，可使用 stopPropagation() 方法。

最后，需要注意的是，有些默认事件是不能被阻止的。例如在浏览器窗口上绑定的关键按键事件（如 Ctrl+C、Ctrl+V 等）、浏览器地址栏中的回车键事件等，都不能通过 preventDefault() 方法来阻止。因此在使用 preventDefault() 方法时一定要确认默认事件的类型和对应的执行逻辑。